<!--
 * @Author: folusGan 245942153@qq.com
 * @Date: 2024-07-08 11:08:14
 * @LastEditors: folusGan 245942153@qq.com
 * @LastEditTime: 2024-10-30 17:26:45
 * @Description: 
-->
<template>
  <div class="nav-wrap">
    <div v-for="(sub, i) in navs" class="border-b">
      <router-link :key="i" :to="sub.routerPath" class="black">{{
        sub.title
      }}</router-link>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    navs: {
      type: Array,
      default: () => [],
    },
  },
  methods: {},
}
</script>
<style>
.nav-wrap {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding-right: 10px;
  user-select: none;
  width: 240px;
  height: 100%;
  .border-b {
    border-bottom: 1px solid #d6d6d6;
  }
  .black {
    color: #000;
    display: block;
    height: 100%;
    letter-spacing: 3px;
    padding: 20px;
    text-align: center;
    text-decoration: none;
    &.router-link-exact-active {
      color: #1c15f0;
    }
    &:hover {
      background-color: rgba(0, 87, 255, 0.06);
      color: #0844fa;
      border-radius: 6px;
      margin-left: 5px;
    }
  }
}
</style>
